import ChartBase from './chart-base'
import {
  grid,
  legend,
  tooltip,
  gridConfig,
  legendConfig,
  tooltipConfig
} from './common'
import { deepClone, mergeObject } from '@/utils'

export default class GraphBase extends ChartBase {
  constructor() {
    super()
  }

  // 基础描述
  _info = {
    name: '关系图',
    type: 'graph-base',// 图表类型

    group: 'graph',// 图表分类
    component: 'e-chart',
    icon: 'graph-base'// 图表展示ICON
  }

  // 总 配置项
  _defaultOption = {
    grid,
    legend,
    tooltip,
    series: []
  }
  // 系列
  _defaultSeries = {
    type: 'graph',
    name: '',
    legendHoverLink: false,
    layout: 'force',
    zoom: 0.1,
    symbol: 'circle',
    data: [],
    links: [],
    categories: [],
    roam: true,
    force: {
      repulsion: 300,
      gravity: 0.01,
      layoutAnimation: true
    },
    draggable: true,
    label: {
      show: true,
      position: 'right',
      formatter: '{b}',
      color: '#909399'
    },
    labelLayout: {
      hideOverlap: true
    },
    scaleLimit: {
      min: 0.4,
      max: 2
    },
    lineStyle: {
      color: 'source',
      curveness: 0.3
    },
    animation: false
  }

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: '节点名称',
      key: 'nameField',
      type: ['string'],
      limit: 1,
      description: '关系图节点的名称字段, 字段类型为「 字符类型 」',
    },
    {
      label: '节点分组',
      key: 'categoryField',
      type: ['string'],
      limit: 1,
      description: '用于区分节点类型, 字段类型为「 字符类型 」',
      width: '50%'
    },
    {
      label: '节点数值',
      key: 'valueField',
      type: ['number'],
      limit: 1,
      description: '数值决定节点的大小, 值越大点越大, 反之亦然, 字段类型为「 数字类型 」',
      width: '50%'
    },
    {
      label: '主键字段',
      key: 'idField',
      type: ['string', 'date', 'number'],
      limit: 1,
      description: '字段类型为「 数字类型 」或 「 字符类型 」',
      width: '50%'
    },
    {
      label: '关系字段',
      key: 'relationField',
      type: ['string', 'date', 'number'],
      limit: 1,
      description: '用于展示节点之间的关系, 字段类型为「 数字类型 」或 「 字符类型 」',
      width: '50%'
    }

  ]

  // 样式配置描述信息
  _styleOptionConfig = [
    ...gridConfig,
    ...legendConfig,
    ...tooltipConfig,
    {
      label: '关系图配置',
      bindKeys: '_group.graph',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '缩放比例',
      bindKeys: 'series.zoom',
      controlType: 'slider',
      controlValue: 0.1,
      controlProps: {
        min: 0.1,// 最小值
        max: 2,// 最大值
        step: 0.1// 步长
      },
      controlConfigs: {}
    },
    {
      label: '图形',
      bindKeys: 'series.symbol',
      controlType: 'select',
      controlValue: 'emptyCircle',
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: '空心圆',
            value: 'emptyCircle'
          },
          {
            label: '圆',
            value: 'circle'
          },
          {
            label: '矩形',
            value: 'rect'
          },
          {
            label: '圆角矩形',
            value: 'roundRect'
          },
          {
            label: '三角形',
            value: 'triangle'
          },
          {
            label: '钻石',
            value: 'diamond'
          },
          {
            label: '箭头',
            value: 'arrow'
          }
        ]
      }
    }
  ]

  getOption({ dataList = [], dataTotal = 0, dataPoolField, styleOptionConfig = [], themeColor = [], themeStyle = {} }) {

    let { option, series } = this._transformStyleOptionConfig(styleOptionConfig)

    let defaultOption = deepClone(this._defaultOption)
    let defaultSeries = deepClone(this._defaultSeries)

    // 再合并自定义配置项
    if (defaultOption && option) defaultOption = mergeObject(defaultOption, option)
    if (defaultSeries && series) defaultSeries = mergeObject(defaultSeries, series)

    defaultOption.color = themeColor

    const checkHasValue = array => array && array instanceof Array && array.length > 0

    // 处理连线数据
    if (checkHasValue(dataPoolField['idField']) && checkHasValue(dataPoolField['relationField'])) {
      const sourceField = dataPoolField['relationField'][0].fieldName
      const targetField = dataPoolField['idField'][0].fieldName

      defaultSeries.links = dataList.reduce((r, c) => {
        r.push({
          source: `${c[sourceField]}`,
          target: `${c[targetField]}`
        })
        return r
      }, [])
    }

    // 处理节点数据
    if (checkHasValue(dataPoolField['idField']) && checkHasValue(dataPoolField['valueField']) && checkHasValue(dataPoolField['nameField'])) {
      const idField = dataPoolField['idField'][0].fieldName
      const nameField = dataPoolField['nameField'][0].fieldName
      const valueField = dataPoolField['valueField'][0].fieldName
      const categoryField = dataPoolField['categoryField'][0].fieldName

      defaultSeries.data = dataList.reduce((r, c) => {
        r.push({
          id: `${c[idField]}`,
          name: c[nameField],
          value: c[valueField],
          category: c[categoryField],
          symbolSize: c[valueField]
        })
        return r
      }, [])

      // 处理分类数据

      if (checkHasValue(dataPoolField['categoryField'])) {

        const categoryField = dataPoolField['categoryField'][0].fieldName

        defaultSeries.categories = dataList.reduce((r, c) => {
          if (r.findIndex(item => item.name === c[categoryField]) === -1) {
            r.push({
              name: c[categoryField]
            })
          }

          return r
        }, [])
      }
    }

    defaultOption.series.push({
      ...defaultSeries
    })

    return defaultOption
  }
}
